<template>
<div class="home_index">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <div>已收款总金额</div>
          <div>{{total.takeok}}</div>
        </div>
      </el-col>
       <el-col :span="3">
        <div class="grid-content bg-purple-light">
         <div>未收款总金额</div>
          <div>{{total.payno}}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
         <div>已付款总金额</div>
          <div>{{total.payok}}</div>
        </div>
      </el-col>
       <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <div>未付款总金额</div>
          <div>{{total.payno}}</div>
        </div>
      </el-col>
       <el-col :span="3">
        <div class="grid-content bg-purple-light">
         <div>费用支出总额</div>
          <div>{{total.cost}}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
         <div>客户总数</div>
          <div>{{total.total}}</div>
        </div>
      </el-col>
    </el-row>
    <div ref="monthChart" style="width:98%; height: 400px;margin-top:20px;"></div>
    <div ref="yearChart" style="width:98%; height: 400px;"></div>
</div>
</template>
<script>
export default {
    name: 'index',
    components:{
    },
    data () {
        return {
            monthDataX:[],
            monthSaleData:[],
            monthBuyData:[],
            monthCostData:[],
            yearSaleData:[],
            yearDataX:[],
            total:{}
        }
    },
    created:function (){
        // this.$emit('header', false);
        //this.initEcharts()
        //myChart.setOption(option);
        this.getCount()
        //this.getMonth()
    },
    mounted:function(){
        this.getMonth()
        //this.initEcharts()
    },
    methods: {
        getCount:function(){
            var data = {
                store_id:localStorage.getItem('store_id')
            }
            var that = this
            this.$get('data/count',data).then((res) => {
                that.total = res.data
            })
        },
        getMonth:function(){
            var data = {
                store_id:localStorage.getItem('store_id')
            }
            var that = this
            this.$get('data/month',data).then((res) => {
                that.monthDataX = res.data.monthDataX
                that.monthSaleData = res.data.monthSaleData
                that.monthBuyData = res.data.monthBuyData
                that.monthCostData = res.data.monthCostData
                that.yearDataX = res.data.yearDataX
                that.yearSaleData = res.data.yearSaleData
                that.initEcharts()
            })
        },
        initEcharts:function(){
            var that = this
            var monthChart = this.$refs.monthChart
            var myMonthChart = this.$echarts.init(monthChart)
            var yearChart = this.$refs.yearChart
            var myYearChart = this.$echarts.init(yearChart)
            var option = {
                title:{
                    text:'月度统计'
                },
                legend:{
                    //data:['访问量','用户量']
                    data:['销售业绩统计','采购记录统计','费用支出统计']
                },
                xAxis:{
                    data:that.monthDataX
                },
                yAxis: {
                    type: 'value'
                },
                series:[
                    {
                        name:'销售业绩统计',
                        type:'bar',
                        data:that.monthSaleData
                    },
                    {
                        name:'采购记录统计',
                        type:'bar',
                        data:that.monthBuyData
                    },
                    {
                        name:'费用支出统计',
                        type:'bar',
                        data:that.monthCostData
                    }
                ]
            };
            var yearOption = {
                title:{
                    text:"年度统计"
                },
                //图例组件
                legend:{
                     data:['年度销售业绩统计']
                },
                //配置要在X轴显示的项
                xAxis:{
                    data:that.yearDataX
                },
                yAxis: {
                    type: 'value'
                },
                //配置要在Y轴显示的项

                //系列列表：每个系列通过Type决定自己的图表类型
                series:[
                    {
                    name:"年度销售业绩统计",  //系列名称
                    data:that.yearSaleData,
                    type:"line",   //系列图表类型(折线图或面积图)
                    smooth:true,
                }],
                tooltip : {
                    
                }
            };
            myMonthChart.setOption(option);
            myYearChart.setOption(yearOption);
        }
    }
}
</script>
<style>
.home_index{
    padding:15px 20px 10px 20px;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    height: 80px;
    text-align:center;
    display: flex;
    flex-direction:column;
    justify-content:center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>